<template>
  <div>
    <h1>计数器</h1>
    <h2>累计数的和为:{{ $store.getters.startnum }}</h2>
    <form action="">
      <select name="chan" v-model="selnum">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option></select
      >&nbsp; <button @click="reduce" class="pub">-</button> &nbsp;&nbsp;
      &nbsp;&nbsp;
      <button @click="add" class="pub">+</button>
    </form>
    <button @click="singular">和为单数时自动加1</button>
    <button @click="deleayed">过1秒自动加1</button>
    <h1>小仓库数据</h1>
    {{ $store.state.index1.arr }}==={{ $store.getters["index1/cha"] }}
    <!-- <button @click="change">点击修改</button> -->
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      selnum: 1,
    };
  },
  methods: {
    reduce() {
      this.$store.commit("reduceSum", Number(this.selnum));
    },
    add() {
      this.$store.commit("addSum", Number(this.selnum));
    },
    singular() {
      this.$store.commit("singularSum", Number(this.selnum));
    },
    deleayed() {
      this.$store.commit("deleayedSum", Number(this.selnum));
    },
  },
  componted: {
    ...mapGetters(["startnum"]), //接收传过来的值
  },
};
</script>

<style lang="less" scoped>
.pub {
  width: 50px;
  height: 15px;
}
</style>